<template>
	<view class="login-container">
		<!-- 顶部Logo和系统名称 -->
		<view class="header login-container-item">
			<image class="logo" src="/static/logo_2.0.jpg"></image>
			<text class="system-name">旭荣网盾(GDCS)</text>
		</view>
		
		<!-- 登录表单卡片 -->
		<view class="login-card login-container-item">
			<view class="card-title">用户登录</view>
			
			<!-- 用户名输入框 -->
			<view class="input-group">
				<image class="input-icon" src="/static/user_name.png"></image>
				<input 
					class="input-field" 
					type="text" 
					placeholder="请输入用户名" 
					v-model="user_name"
				/>
			</view>
			
			<!-- 密码输入框 -->
			<view class="input-group">
				<image class="input-icon" src="/static/Password.png"></image>
				<input 
					class="input-field" 
					type="password" 
					placeholder="请输入密码" 
					v-model="password"
				/>
			</view>
			
			<!-- 记住我和忘记密码 -->
			<view class="login-options">
				<label class="remember-me">
					<view class="checkbox-custom" @click="toggleRememberMe">
						<image :src="rememberMe ? '/static/gxk_yes.png' : '/static/gxk_no-.png'" mode="aspectFit" class="checkbox-icon" />
					</view>
					<text>记住我</text>
				</label>
				<text class="forgot-password" @click="forgotPassword">忘记密码?</text>
			</view>
			
			<!-- 登录按钮 -->
			<button class="login-btn" @click="handleLogin">登录</button>
			
			<!-- 注册链接 -->
			<view class="register-link">
				<text>还没有账户？</text>
				<text class="register-text" @click="goToRegister">立即注册</text>
			</view>
		</view>
		
		<!-- 登录失败提示模态框 -->
			<view class="modal" v-if="showErrorModal" @click="closeErrorModal">
				<view class="modal-content" @click.stop>
					<view class="modal-title">登录失败</view>
					<view class="modal-message">
						{{ errorMessage }}
					</view>
					<button class="modal-btn" @click="closeErrorModal">确定</button>
				</view>
			</view>
	</view>
</template>

<script>
	import { login } from '../../api/api.js';
	export default {
		data() {
			return {
				user_name: '',
				password: '',
				rememberMe: false,
				showErrorModal: false,
				errorMessage: '用户名不存在或密码错误，请确认你输入了正确的用户名或密码。如果你忘记密码，请找回密码或重新注册用户名。'
			}
		},
		onLoad() {
			// 检查是否有记住的账户
			const rememberedAccount = uni.getStorageSync('rememberedAccount');
			if (rememberedAccount) {
					this.user_name = rememberedAccount;
					this.rememberMe = true;
				}
		},
		methods: {
			handleLogin() {
				// 简单的登录验证逻辑
				if (!this.user_name || !this.password) {
					this.showErrorModal = true;
					return;
				}
				
				// 显示加载提示
				uni.showLoading({
					title: '登录中...'
				});
				
				// 向后端发送登录请求
			login(this.user_name, this.password)
				.then((res) => {
					if (res.success === true) {
						// 登录成功，保存用户信息
				uni.setStorageSync('userInfo', res);
				// 保存当前登录用户信息（用于权限验证）
				uni.setStorageSync('currentUser', {
					user_id: res.user.user_id,
					user_name: res.user.user_name,
					email: res.user.email
				});
						
						// 如果选中了记住我，保存账户信息
						if (this.rememberMe) {
								uni.setStorageSync('rememberedAccount', this.user_name);
							} else {
								uni.removeStorageSync('rememberedAccount');
							}
						
						// 跳转到主页
						uni.navigateTo({
							url: '/pages/home/home'
						});
					} else {
						// 登录失败，更新错误信息并显示模态框
						this.errorMessage = res.detail || '登录失败，请检查账户和密码'; // 使用服务器返回的错误信息
						this.showErrorModal = true;
					}
				})
				.catch((error) => {
					// 分析错误原因并显示具体提示
					let errorMessage = '网络请求失败，请稍后重试';
					if (error.errMsg && error.errMsg.includes('request:fail')) {
						if (error.errMsg.includes('timeout')) {
							errorMessage = '服务器响应超时，请检查网络连接';
						} else if (error.errMsg.includes('network')) {
							errorMessage = '网络连接异常，请检查网络设置';
						} else {
							errorMessage = '无法连接到服务器，请确保后端服务已启动';
						}
					}
					// 显示错误模态框
					this.errorMessage = errorMessage;
					this.showErrorModal = true;
				})
				.finally(() => {
					// 隐藏加载提示
					uni.hideLoading();
				});
			},
			
			forgotPassword() {
				uni.navigateTo({
					url: '/pages/forgot-password/forgot-password'
				});
			},
			
			goToRegister() {
			try {
				uni.navigateTo({
					url: './register/register',
					fail: function(err) {
						// 尝试绝对路径
						uni.navigateTo({
							url: '/pages/register/register',
							fail: function(err2) {
								uni.showToast({
									title: '页面跳转失败，请检查页面配置',
									icon: 'none'
								});
							}
						});
					}
				});
			} catch (error) {
				uni.showToast({
					title: '跳转异常',
					icon: 'none'
				});
			}
		},
			
			toggleRememberMe() {
				this.rememberMe = !this.rememberMe;
			},
			closeErrorModal() {
				this.showErrorModal = false;
			}
		}
	}
</script>

<style>
	.login-container {
		min-height: 100vh;
		background: url('/static/home.webp') center center / cover no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 60rpx;
		position: relative;
	}

	.login-container::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1;
	}

	.login-container-item {
		position: relative;
		z-index: 2;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 80rpx;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	}

	.system-name {
		font-size: 48rpx;
		font-weight: bold;
		color: #ffffff;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}

	.login-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 60rpx 50rpx;
		width: 100%;
		max-width: 600rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
	}

	.card-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
		margin-bottom: 50rpx;
	}

	.input-group {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
		margin-bottom: 30rpx;
		border: 2rpx solid #e9ecef;
		transition: border-color 0.3s;
	}

	.input-group:focus-within {
		border-color: #667eea;
	}

	.input-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
		opacity: 0.6;
	}

	.input-field {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
		background: transparent;
		border: none;
		outline: none;
	}

	.login-options {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.remember-me {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666666;
	}
	
	.checkbox-custom {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8rpx;
	}
	
	.checkbox-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.forgot-password {
		font-size: 26rpx;
		color: #667eea;
		text-decoration: underline;
	}

	.login-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
		border: none;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
		transition: transform 0.2s;
	}

	.login-btn:active {
		transform: translateY(2rpx);
	}

	.register-link {
		text-align: center;
		font-size: 26rpx;
		color: #666666;
	}

	.register-text {
		color: #667eea;
		text-decoration: underline;
		margin-left: 10rpx;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 40rpx;
		margin: 0 60rpx;
		max-width: 500rpx;
		text-align: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #e74c3c;
		margin-bottom: 20rpx;
	}

	.modal-message {
		font-size: 26rpx;
		color: #666666;
		line-height: 1.6;
		margin-bottom: 30rpx;
	}

	.modal-btn {
		background: #667eea;
		color: #ffffff;
		border: none;
		border-radius: 8rpx;
		padding: 16rpx 40rpx;
		font-size: 28rpx;
	}
</style>
